| Vue生命周期（简单易懂,超详细） | 您所在的位置：网站首页 › vue v if 生命周期 › Vue生命周期（简单易懂,超详细） |
Vue生命周期（简单易懂,超详细）
|
前言
实例创建之后，初始化事件和生命周期，而后触发beforeCreate。
beforeCreate，当前实例创建之前，很少操作，一般用于加载动画，比如创建一个菊花旋转。
created表示当前实例创建完成，组件、属性等初始化完成，一般封装一个方法，比如getDataFromNetwork，从网络请求数据this.getDataFromNetwork()调用，触发回调，关闭beforeCreated中的菊花加载动画。
当前实例创建完成，页面还未渲染未显示，拿不到DOM元素。而后，判断实例中是否有el属性（挂载点），如果有，继续往下；如果没有，然后判断是不是有vm.$mount，两者二选其一，接着判断有没有template，如果有，触发渲染函数，进入beforeMount，表示将要挂载，页面仍未显示，接着创建vm.$el,接着触发mounted，此时可以操作dom，beforeUpdate与update保持数据与页面的同步，会频繁触发，一般不要进行操作。接下来，destroyed表示组件销毁，destroy的中一般用于取消计时器，取消观察者等等。
生命周期图解
一句话概述： 组件从 创建 到 销毁 的整个过程就是生命周期 作用:特定的时间点，执行特定的操作 场景:组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据 分类: 4大阶段8个方法 初始化 挂载 更新 销毁 钩子函数触发的行为在此阶段可以做的事情beforeCreadtedvue实例的挂载元素$el和数据对象data都为undefined，还未初始化。加loading事件createdvue实例的数据对象data有了，$el还没有结束loading、请求数据为mounted渲染做准备beforeMountvue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。mountedvue实例挂载完成，data.filter成功渲染配合路由钩子使用beforeUpdatedata更新时触发updateddata更新时触发数据更新时，做一些处理（此处也可以用watch进行观测）beforeDestroy组件销毁时触发destroyed组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在组件销毁时进行提示 2.钩子函数 （1）创建期间的生命周期函数： beforeCreate（初始化界面前）：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 created（初始化界面后）：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板 （2）挂载期间的生命周期函数 beforeMount（渲染DOM前）：此时已经完成了模板的编译，但是还没有挂载到页面中 mounted（渲染DOM后）：此时，已经将编译好的模板，挂载到了页面指定的容器中显示 （3） 运行期间的生命周期函数： beforeUpdate（更新数据前）：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点 updated（更新数据后）：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！ （4）销毁期间的生命周期函数： beforeDestroy（卸载组件前）：实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed（卸载组建后）：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 （5）测试代码：组件模板自己试着写就好，此处贴js代码 var vm = new Vue({ el: '#app', data: { message: 'Vue的生命周期' }, beforeCreate: function() { console.group('------beforeCreate创建前状态------'); console.log("%c%s", "color:red" , "el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message) }, created: function() { console.group('------created创建完毕状态------'); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeMount: function() { console.group('------beforeMount挂载前状态------'); console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, mounted: function() { console.group('------mounted 挂载结束状态------'); console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, updated: function () { console.group('updated 更新完成状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, destroyed: function () { console.group('destroyed 销毁完成状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) } }) 复制代码 （6）激活与未激活的生命周期 activated（）：被 keep-alive 缓存的组件激活时调用。 该钩子在服务器端渲染期间不被调用。 deactivated（）：被 keep-alive 缓存的组件停用时调用。 该钩子在服务器端渲染期间不被调用。 （7）捕获错误2.5.0+ 新增 errorCaptured（）：你可以在此钩子中修改组件的状态。因此在捕获错误时，在模板或渲染函数中有一个条件判断来绕过其它内容就很重要；不然该组件可能会进入一个无限的渲染循环。 3.钩子函数的理解所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此this与你期待的 Vue 实例不同，this.fetchTodos的行为未定义。 |
【本文地址】
公司简介
联系我们